<template>
  <div class="wechat-setting-page">
    <page-header-wrapper>
      <page-tab-list>
        <div style="padding-top: 50px"></div>
        <a-form-model :model="formData" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" ref="form">
          <a-form-model-item label="账户类型" prop="bank_acct_type">
            <a-radio-group v-model="formData.bank_acct_type">
              <a-radio :value="2"> 对私 </a-radio>
              <a-radio :value="1"> 对公 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="银行卡卡号" prop="card_id">
            <a-input v-model="formData.card_id" />
          </a-form-model-item>
          <a-form-model-item label="银行卡户名" prop="card_name">
            <a-input v-model="formData.card_name" />
          </a-form-model-item>
          <a-form-model-item label="手机号" prop="tel_no">
            <a-input v-model="formData.tel_no" />
          </a-form-model-item>
          <a-form-model-item v-if="formData.bank_acct_type == 2" label="证件号" prop="cert_id">
            <a-input v-model="formData.cert_id" />
          </a-form-model-item>

          <a-form-model-item v-if="formData.bank_acct_type == 1" label="开户银行" prop="tel_no">
            <a-select v-model="formData.bank_code">
              <a-select-option v-for="(item, i) in BankList" :key="i" :value="item.bank_code">
                {{ item.机构名称 }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item v-if="formData.bank_acct_type == 1" label="开户行所在地" prop="prov_code">
            <a-cascader
              v-model="prov_code"
              :options="AddressList"
              :fieldNames="{
                label: 'title',
                value: 'value',
                children: 'cities',
              }"
              expandTrigger="hover"
            />
          </a-form-model-item>
          <a-row type="flex">
            <a-col :span="4"></a-col>
            <a-button :loading="confirmLoading" @click="onSave" type="primary">保存</a-button>
          </a-row>
        </a-form-model>
      </page-tab-list>
    </page-header-wrapper>
  </div>
</template>
<script>
import { conf, confSave, storeBankSetting, bankSetting } from '@/api/setting/adapay'
import BankList from '@/views/setting/Json/BankList.json'
import AddressList from '@/views/setting/Json/AddressList.json'
export default {
  data() {
    return {
      BankList,
      AddressList,
      formData: {
        bank_acct_type: 2, //银行账户类型：1-对公；2-对私
        card_id: '', //银行卡号
        card_name: '', //银行卡对应的户名
        cert_id: '', //证件号，银行账户类型为对私时，必填
        cert_type: '00', //证件类型，仅支持：00-身份证，银行账户类型为对私时，必填
        tel_no: '', //手机号
        bank_code: '', //银行编码，详见附录 银行代码，银行账户类型对公时，必
        prov_code: '', //银行账户开户银行所在省份编码 （省市编码），银行账户类型为对公时，必填
        area_code: '', //银行账户开户银行所在地区编码（省市编码），银行账户类型为对公时，必填
      },
      rules: {
        card_id: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        card_name: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        cert_id: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        tel_no: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        bank_code: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        prov_code: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['change', 'blur'],
          },
        ],
      },
      confirmLoading: false,
    }
  },
  watch: {},
  async created() {
    await this.getData()
  },
  computed: {
    prov_code: {
      get() {
        if (this.formData.prov_code) {
          try {
            this.AddressList.forEach((item) => {
              if(item.value == this.formData.prov_code) {
                throw [item.value]
              }
              if(item.cities && item.cities.length) {
                item.cities.forEach((item1) => {
                  if(item1.value == this.formData.prov_code) {
                    throw [item.value, item1.value]
                  }
                })
              }
            })
            return []
          } catch (val) {
            return val
          }
        }
        return []
      },
      set(val) {
        console.log(val, 'set')
        this.formData.prov_code = val[val.length - 1]
        this.formData.area_code = val[0]
      },
    },
  },
  methods: {
    selectChange(code) {
      console.log(this.BankList.find((item) => item.bank_code == code))
    },
    onSave() {
      this.confirmLoading = true
      this.$refs.form.validate(async (confirm) => {
        if (confirm) {
          const res = await bankSetting({ conf: this.formData }, 'POST')
          this.getData()
          this.$message.success('保存成功')
          this.confirmLoading = false
        } else {
          this.confirmLoading = false
        }
      })
    },
    getData: async function () {
      const res = await bankSetting({}, 'GET')
      this.formData = Object.assign(this.formData, res.data ? res.data : {})
    },
  },
}
</script>
<style lang="scss" scoped></style>
